<template>
    <section class="qiankun_wrap">
        <router-link to="/qiankun#/child">点击跳转到子页面</router-link><br />
        <router-link to="/qiankun1#/child">点击跳转到子页面1</router-link>
        <!-- 在主应用页面中添加子应用挂载容器 -->
        <div class="subapp-container" id="subapp-container"></div>
        <div class="subapp-container1" id="subapp-container1"></div>
    </section>
</template>

<script setup>
import { onMounted } from 'vue';
import router from '@/router'

/* import {
    registerMicroApps,
    start,
} from 'qiankun'

onMounted(() => {
    start({
        sandbox: {
            experimentalStyleIsolation: true, // 开启样式隔离
            strictStyleIsolation: true // 严格样式隔离
        }
    })
}) */

onMounted(() => {
    router.push('/qiankun#/child')
})

</script>

<style lang="scss" scoped>
.qiankun_wrap {
    width: 100%;
    height: calc(100vh - 84px);

    :deep(.subapp-container) {
        width: 100%;
        height: 100%;

        :deep(#__qiankun_microapp_wrapper_for_qiankun_child__) {
            width: 100%;
            height: 100%;

            #app {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>